<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户注册</title>
    <script type="text/javascript" src="__JS__/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="__JS__/【谷歌版】ajaxfileupload.js"></script>
    <script type="text/javascript" src="__JS__/jquery.cookie.js"></script>

    <script src="__JS__/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
    <script src="__JS__/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="__CSS__/style.css" />
    <link href="__CSS__/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body
        {
            _width: 98%;
        }
    </style>

</head>
<body>

<script>
    $(function(){
        var sp=$('#sp');
        var sjh2=$('#sjh');
        var sj="<{$time}>";
        if(sj>0){
            i=sj;

            var inte=  setInterval(function(){
                if(i>120){
                    sp.html("<input type='button'  CLASS='YZSJ' value='发送验证码'>");
                }else if(i==1){
                    clearInterval(inte);
                    sp.html("<input type='button'  CLASS='YZSJ' value='发送验证码'>");
                }
                else{
                    i=i-1;
                    sp.html("重新发送"+i);
                }
            },1000);
        }
    });
</script>

<form action="" method="post">
    <input type="hidden" name="__token__" value="<{$token}>">

    <div id="Main">
        <h1>
            <span>用户注册</span></h1>
        <div class="dtContent">

            <table class="inputTable">
                <tr>
                    <th>
                        头像
                    </th>
                    <td>
                        <div class="bbD">
                            <div class="id_file" style="display:inline-block"></div>

                            <input id="logo" type="file" name='logo' />
                            <input id="pic" type="hidden" name="pic_url" value=""/>
                            <input id="thumb" type="hidden" name="thumb_url" value=""/>

                            <input type="button" id='upload' value="上传" />
                        </div>

                    </td>
                </tr>


                <tr>
                    <th>
                        用户名
                    </th>
                    <td>
                        <input type="text" class="txtIpt" name="username" />
                    </td>
                </tr>
                <tr>
                    <th>
                        昵称
                    </th>
                    <td>
                        <input type="text" class="txtIpt" name="nickname"/>
                    </td>
                </tr>
                <tr>
                    <th>
                        密码
                    </th>
                    <td>
                        <input type="password" class="txtIpt" name="password"/>
                    </td>
                </tr>
                <tr>
                    <th>
                        确认密码
                    </th>
                    <td>
                        <input type="password" class="txtIpt" name="rpwd"/>
                    </td>
                </tr>

                <tr>
                    <th>
                        性别
                    </th>
                    <td>
                        <input type="radio" class="txtIpt" name="sex" value="1"/>男 <br>
                        <input type="radio" class="txtIpt" name="sex" value="2"/>女 <br>
                        <input type="radio" class="txtIpt" name="sex" value="3"/>保密
                    </td>
                </tr>
                <tr>
                    <th>
                        省市区
                    </th>
                    <td>
                    <div class="bbD">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所属分类：
                        <select name="province" id="first" style="margin-left: 10px;width: 100px;">
                            <option value="">---请选择---</option>
                            {foreach name="list" item="v"}
                            <option value="<{$v.id}>"><{$v.name}></option>
                            {/foreach}
                        </select>
                        <select name="city" id="second" style="width: 100px;display: none;"></select>
                        <select name="district" id="third" style="width: 100px;display: none;"></select>
                    </div>
                    </td>
                </tr>
                <tr>
                    <th>
                        生日
                    </th>
                    <td>
                        <input type="date" class="txtIpt" name="birthday"/>
                    </td>
                </tr>

                <!--<tr>-->
                    <!--<th>-->
                        <!--手机验证-->
                    <!--</th>-->
                    <!--<td>-->
                        <!--<input type="text" class="txtIpt" name="yan"/>-->
                    <!--</td>-->
                <!--</tr>-->

                <!--<tr>-->
                    <!--<th>-->
                        <!--手机-->
                    <!--</th>-->
                    <!--<td>-->
                        <!--<input id="mo" type="text" class="txtIpt" name="mobile"/>-->
                        <!--&lt;!&ndash;<input type="button" id='bt' value="验证" />&ndash;&gt;-->


                                <!--<input type="button" class="btn" id="btn" value="获取验证码" /> <br>-->
                                       <!--&lt;!&ndash;onclick="setTime(this)" &ndash;&gt;-->

                        <!--<input id="shouji" type="text" name="shouji" value="" style="display: none">-->


                    <!--</td>-->
                <!--</tr>-->
                <tr>
                    <th>
                        手机号：
                    </th>
                    <td>
                        <input type="text" id="SJH" name="mobile" class="input3"/>
                        <span id="sp">
                          {if $time==1}<input type="button" class="YZSJ"  value="发送验证码">
                         {else/}<{$time}>秒后可重新发送
                          {/if}
                        </span>
                        <br>
                        <input type="hidden" id="YZM" >
                        <span id="sp2"></span>
                    </td>
                </tr>


                <tr>
                    <th>
                        邮箱
                    </th>
                    <td>
                        <input type="text" class="txtIpt" name="email"/>
                    </td>
                </tr>
                <tr>
                    <th>
                        个人简介
                    </th>
                    <td>
                        <input type="text" class="txtIpt" name="profiles"/>
                    </td>
                </tr>

                <!--<div>-->
                    <!--<div class="bbD">头　　像：<div class="id_file" style="display:inline-block"></div>-->

                        <!--<input id="file" type="file" name='upload' />-->

                        <!--<input id="pic" type="hidden" name="pic_url" value=""/>-->
                        <!--<input id="thumb" type="hidden" name="thumb_url" value=""/>-->
                        <!--<input type="button" id='upload' value="上传" />-->
                    <!--</div>-->
                <!--</div>-->

                <!--<tr>-->
                    <!--<th>-->
                        <!--启程时间-->
                    <!--</th>-->
                    <!--<td>-->
                        <!--<input type="text" class="txtIpt" id="DatePicker" />-->
                    <!--</td>-->
                <!--</tr>-->

                <!--<script type="text/javascript">-->
                    <!--$(function () {-->
                        <!--$.datepicker.setDefaults($.datepicker.regional[""]);-->
                        <!--$("#DatePicker").datepicker($.datepicker.regional["zh-CN"]);-->
                    <!--});-->
                    <!--</script>-->
            </table>
        </div>
        <div class="appC">
            <button>提交</button>
        </div>
    </div>



</form>
</body>







<!--<script>-->
    <!--$('#upload').click(function(){-->
<!--//        alert("开始上传...");-->
        <!--$.ajaxFileUpload({-->
            <!--url:"<{:url('Ajsx/ajaxUpload','','')}>",   //处理图片的脚本路径 @@第1处修改-->
            <!--type: 'post',       //提交的方式-->
            <!--secureuri :false,   //是否启用安全提交，https-->
            <!--fileElementId :'logo',     //file控件ID @@第2处修改-->
            <!--dataType : 'json',  //服务器返回的数据类型-->
            <!--success : function (data, status){  //提交成功后自动执行的处理函数-->
                <!--//if(1 != data.total) return;　　 //因为此处指允许上传单张图片，所以数量如果不是1，那就是有错误了-->
                <!--//var url = data.files[0].path;-->
                <!--// @@第3处修改-->

                <!--if(1 == data.status){-->
                    <!--var url = data.pic_url;-->
                    <!--var thumb = data.thumb_url;-->
                    <!--console.log(thumb);-->
                    <!--$('.id_file').empty();-->
                    <!--//此处效果是：当成功上传后会返回一个json数据，里面有url，取出url赋给img标签，然后追加到.id_photos类里显示出图片-->
                    <!--$('#pic').val(url);//$('#pic').prop('value',url);-->
                    <!--$('#thumb').val(thumb);-->
                    <!--$('.id_file').append('<img src="/'+thumb+'" style="width:100px" >');-->
                    <!--//$('.upload-box').remove();-->
                    <!--alert(data.error);-->
                <!--}else{-->
                    <!--alert(data.error);-->
                <!--}-->
            <!--},-->
            <!--error: function(data, status, e){   //提交失败自动执行的处理函数-->
                <!--alert(e);-->
            <!--}-->
        <!--});-->
    <!--});-->
<!--</script>-->

<script>
    $('#upload').click(function(){
//        alert("开始上传...");
        $.ajaxFileUpload({
            url:"<{:url('index/Ajax/ajaxUpload','','')}>",   //处理图片的脚本路径 @@第1处修改
            type: 'post',       //提交的方式
            secureuri :false,   //是否启用安全提交，https
            fileElementId :'logo',     //file控件ID @@第2处修改
            dataType : 'json',  //服务器返回的数据类型
            success : function (data, status){  //提交成功后自动执行的处理函数
                //if(1 != data.total) return;　　 //因为此处指允许上传单张图片，所以数量如果不是1，那就是有错误了
                //var url = data.files[0].path;
                // @@第3处修改
                if(1 == data.status){
                    var url = data.pic_url;
                    var thumb = data.thumb_url;
                    $('.id_file').empty();
                    //此处效果是：当成功上传后会返回一个json数据，里面有url，取出url赋给img标签，然后追加到.id_photos类里显示出图片
                    $('#pic').val(url);//$('#pic').prop('value',url);
                    $('#thumb').val(thumb);
                    $('.id_file').append('<img src="/'+thumb+'" style="width:100px" >');
                    //$('.upload-box').remove();
//                    alert(data.error);
                }else{
                    alert(data.error);
                }
            },
            error: function(data, status, e){   //提交失败自动执行的处理函数
                alert(e);
            }
        });
    });
    //三级下拉联动
    $('#first').add("#second").change(function(){
        let $this=$(this);
        let tid=$this.attr('tid');
        $.ajax({
            url:"<{:url('index/Login/san')}>",
            type:"post",
            data:{"id":$this.val(),tid:tid},
            dataType:"json",
            success:function(data){
                $this.next().css('display','inline-block');
                $.each(data,function(index,value){
                    $this.next().append("<option value='"+value.id+"'>"+value.name+"</option>")
                });
                $this.next().trigger('change');
            }
        });
    });

    //短信验证


    var yzm=$('#YZM');
    var SJH4=$('.YZSJ');
    $('body').on("click",".YZSJ",function(){
//    function btnClick(){
        var sjh=$('#SJH').val();
        //输入的手机号
        var sjh2=$('#SJH');
        var yzsh=$('.YZSJ');

        var sp=$('#sp');
        if(sjh==''){
            alert('请输入手机号码');
            return ;
        }
        var value='',i;
        //生成的随机数验证码
        var charactors="1234567890";
        for(j=1;j<=4;j++){
            i = parseInt(10*Math.random());
            value = value + charactors.charAt(i)
        }

        $.post(
                "<{:url('index/Ajax/msg','','')}>",//url
                {'sjs':value,'sjh':sjh},	//form表单的参数
                function(data){

                    if(data.Message=='OK'){

                        sjh2.attr('disabled','disabled');
                        var i=120;
                        var inte=  setInterval(function(){
                            if(i==1){
                                sp.html("<input type='button' CLASS='YZSJ' value='发送验证码'>");
                                clearInterval(inte);
                            }else{
                                i=i-1;
                                sp.html(i+"秒后可重新发送");
                            }
                        },1000);
                        yzm.attr('type','text');
                    }
                },
                'json'
        );
    });
    var tijiao=false;

    yzm.blur(function(){

        var sjh2=$.cookie('yzm');
        if($(this).val()==sjh2){
            $('#sp2').html('√');
            tijiao=true;
        }else if($(this).val()==''){
            $('#sp2').html('验证码不能为空');
            tijiao=false
        }
        else{
            $('#sp2').html('验证码输入错误');
            tijiao=false;
        }
    });
    $(".btn_tj").click(function(){
        if(tijiao==true){
            return true;
        }
        return false;
    })






//yuan
//    var countDown=60;
//
//    $('#btn').click(function setTime(val) {
//
//        if (countDown == 0) {
//            val.removeAttribute("disabled");
//            val.value="获取验证码";
//            countDown = 60;
//            return;
//        } else {
////            var hao=$('#mo').val();
////            $rt=new Ajax();
////            $ms=$rt->duanxin(hao);
//
//            val.setAttribute("disabled", true);
//            val.value="重新发送(" + countDown + ")";
//            countDown--;
//        }
//
//        setTimeout(function() {
//            setTime(val)
//        },1000)
//    });







    //2方法
//
//     var code = JSON.parse(localStorage.getItem('code'));
//    $.ajax({
//        type: "post",
//        url: "<{:url('Ajax/duanxin','','')}>", //后台代码文件名
//        data: {
//            mobile:$('#mo').val()//获取输入的手机号
//        },
//         dataType: "json",
//        success:function(data){
//            console.log(data);
//            layer.msg('验证码发送成功，请注意查收！');
//            localStorage.setItem('code', JSON.stringify(data))
//        },
//        error:function(err){
//
//            console.log(err);
//
//            if($('#mo').val() != code ){
//                layer.msg('验证码输入错误');
//                return false;
//            }
//        }
//    });

</script>

</html>
